<template>
  <div class="hello">
    <h2>个人信息 ：</h2>
    <table>
        <thead>
          <tr>
            <th>姓名</th>
            <th>学号</th>
            <th>年级</th>
            <th>专业</th>
            <th>大学</th>
            <th>爱好</th>
          </tr>
        </thead>
        <tr id="line_tr"></tr>
        <tbody>
          <td>
            <a href="../../static/jump.html"
              target="_blank">
              周奕卿
            </a>
          </td>
          <td>19101414</td>
          <td>大四</td>
          <td>计算机科学与技术</td>
          <td>天津科技大学</td>
          <td>音乐</td>
        </tbody>
      </table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h2 {
  position: relative;
  left: -40%;
  font-size: 200%;
  font-weight: bolder;
  color: #666;
}
table {
  margin: 0 auto;
  width: 90%;
  height: auto;
  text-align: center;
  font-size: x-large;
  border-radius: 10px;
  background: white;
  border-collapse: collapse;
  box-shadow: 3px 3px 2px 2px #888;
}
tr#line_tr {
  height: 1px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.2);
}
th, td {
  padding: 0.5%;
}
a {
  color: #FF7F27;
}
</style>
